<template>
	<view>
		<view class="toptext">绑定设备前请确保设备联网</view>
		<view class="binding">
			<view class="bindingitem flex-between">
				<view class="flex">
					<view class="name">节点ID <span>*</span> </view>
					<input type="text" v-model="nodeId" placeholder="请输入节点ID"
						placeholder-style="font-weight: 400;font-size: 28rpx;color: #CCCCCC;" />
				</view>
				<image src="/static/saoma.png" @click="handleScanCode" mode=""></image>
			</view>
			<view class="bindline"></view>
			<view class="bindingitem flex-between">
				<view class="flex">
					<view class="name">节点名称<span></span> </view>
					<input type="text" v-model="nodeName" placeholder="请输入节点名称"
						placeholder-style="font-weight: 400;font-size: 28rpx;color: #CCCCCC;" />
				</view>
				<!-- <image src="../../static/down.png" mode=""></image> -->
			</view>
			<view class="bindline"></view>
			<!-- <view class="bindingitem flex-between" @click="show1=true">
				<view class="flex">
					<view class="name">分组<span>*</span> </view>
					<view class="iclass" :style="groupname?'color:#333333;':''">{{groupname?groupname:'请选择分组'}}</view>
				</view>
				<image src="../../static/down.png" mode=""></image>
			</view>
			<view class="bindline"></view> -->
			<view class="bindingitem flex-between" @click="showPCA01">
				<view class="flex">
					<view class="name">省份城市<span>*</span> </view>
					<view class="iclass" :style="area.name?'color:#333333;':''">{{area.name?area.name:'请选择省份城市'}}</view>
				</view>
				<u-icon name="arrow-down"></u-icon>
			</view>
			<view class="bindline"></view>
			<view class="bindingitem flex-between" @click="show2=true">
				<view class="flex">
					<view class="name">运营商<span>*</span> </view>
					<view class="iclass" :style="ispname?'color:#333333;':''">{{ispname?ispname:'请选择运营商'}}</view>
				</view>
				<u-icon name="arrow-down"></u-icon>
			</view>
			<view class="bindline"></view>
			<view class="bindingitem flex-between" @click="show5=true">
				<view class="flex">
					<view class="name">业务<span>*</span> </view>
					<view class="iclass" :style="tasksname?'color:#333333;':''">{{tasksname?tasksname:'请选择网络类型'}}</view>
				</view>
				<u-icon name="arrow-down"></u-icon>
			</view>
			<view class="" v-if="showtype">
				<view class="bindline"></view>
				<view class="bindingitem flex-between">
					<view class="flex">
						<view class="name">线路条数<span></span> </view>
						<input type="text" v-model="bwNum" placeholder="请输入线路条数"
							placeholder-style="font-weight: 400;font-size: 28rpx;color: #CCCCCC;" />
					</view>
					<!-- <image src="../../static/down.png" mode=""></image> -->
				</view>
				<view class="bindline"></view>
				<view class="bindingitem flex-between">
					<view class="flex">
						<view class="name">单条上行Mbps<span></span> </view>
						<input type="text" v-model="usbw" placeholder="请输入单条上行Mbps"
							placeholder-style="font-weight: 400;font-size: 28rpx;color: #CCCCCC;" />
					</view>
					<!-- <image src="../../static/down.png" mode=""></image> -->
				</view>
				<view class="bindline"></view>
				<view class="bindingitem flex-between" @click="show4=true">
					<view class="flex">
						<view class="name">网络类型<span>*</span> </view>
						<view class="iclass" :style="natname?'color:#333333;':''">{{natname?natname:'请选择网络类型'}}</view>
					</view>
					<u-icon name="arrow-down"></u-icon>
				</view>
				<view class="bindline"></view>
				<view class="bindingitem flex-between" @click="show3=true">
					<view class="flex">
						<view class="name">拨号方式<span>*</span> </view>
						<view class="iclass" :style="dial?'color:#333333;':''">{{dial?dial:'请选择拨号方式'}}</view>
					</view>
					<u-icon name="arrow-down"></u-icon>
				</view>

			</view>
		</view>
		<view class="bindbtn" @click="bluebind">
			立即绑定
		</view>
		<u-picker :show="show1" :columns="GroupList" keyName="name" @cancel='show1=false'
			@confirm="confirm1"></u-picker>
		<pcaPicker v-if="areashow" ref="pcaPicker" :areaList='areaList' @confirm="getPCA01"></pcaPicker>
		<u-picker :show="show2" @cancel='show2=false' keyName="text" @confirm="confirm2" :columns="ispList"></u-picker>
		<u-picker :show="show3" @cancel='show3=false' keyName="text" @confirm="confirm3" :columns="dialList"></u-picker>
		<u-picker :show="show4" @cancel='show4=false' keyName="text" @confirm="confirm4" :columns="natList"></u-picker>
		<u-picker :show="show5" @cancel='show5=false' keyName="name" @confirm="confirm5"
			:columns="tasksList"></u-picker>
	</view>
</template>

<script>
	import pcaPicker from '@/components/pcaPicker.vue'
	export default {
		components: {
			pcaPicker
		},
		data() {
			return {
				show1: false,
				GroupList: [],
				groupname: "",
				groupid: "",
				areaList: [],
				index1: 0,
				area: {
					name: '',
					ids: ''
				},
				areashow: false,
				ispname: '',
				isp: "",
				ispList: [
					['移动', '联通', '电信']
				],
				show2: false,
				dialList: [],
				show3: false,
				dial: '',
				dialType: '',
				natList: [],
				show4: false,
				natname: '',
				natType: '',
				bwNum: '',
				tasksList: [],
				show5: false,
				tasksname: '',
				task: '',
				nodeId: '',
				nodeName: '',
				usbw: '',
				showtype: false
			}
		},
		onLoad() {
			this.getgroup()
			this.mushroomarea()
			this.get_isp()
			this.get_dial()
			this.get_nat()
			this.get_tasks()
		},
		methods: {
			//省市
			showPCA01(e) {
				this.$refs.pcaPicker.show();
			},
			getPCA01(name, ids) {
				console.log(name, ids);
				this.area.name = name
				this.area.ids = ids
			},
			open() {
				this.$refs.dialog.show = true
			},
			//分组
			confirm1(e) {
				console.log('confirm', e)
				this.groupname = e.value[0].name
				this.groupid = e.value[0].id
				this.show1 = false
			},
			//运营商
			confirm2(e) {
				console.log(e)
				this.show2 = false
				this.isp = e.value[0].value
				this.ispname = e.value[0].text
			},
			//运营商wangluo
			confirm3(e) {
				console.log(e)
				this.show3 = false
				this.dial = e.value[0].text
				this.dialType = e.value[0].value
			},
			//nat 类型
			confirm4(e) {
				console.log(e)
				this.show4 = false
				this.natname = e.value[0].text
				this.natType = e.value[0].value
			},
			//shangji 类型
			confirm5(e) {
				console.log(e)
				this.show5 = false
				this.task = e.value[0].id
				this.tasksname = e.value[0].name
				if (this.task !== "JBOX_JBOX$ROUTER" && this.task !== "D_D" && this.task !== "YUN_d$" && this.task !==
					"mushroom_MGBOX") {
					this.showtype = true
				} else {
					this.showtype = false
				}
			},
			getgroup() {
				this.$fun.ajax.post('butt/groupList', {

				}).then(res => {
					this.GroupList = [res.data]
				})
			},
			mushroomarea() {
				this.$fun.ajax.post('bird/area', {}).then(res => {
					this.areaList = res.data
					this.areashow = true
				})
			},
			get_isp() {
				this.$fun.ajax.post('bird/get_isp', {}).then(res => {
					this.ispList = [res.data]
				})
			},
			get_dial() {
				this.$fun.ajax.post('bird/get_dial', {}).then(res => {
					this.dialList = [res.data]
				})
			},
			get_nat() {
				this.$fun.ajax.post('bird/get_nat', {}).then(res => {
					this.natList = [res.data]
				})
			},
			get_tasks() {
				this.$fun.ajax.post('bird/get_tasks', {}).then(res => {
					this.tasksList = [res.data]
				})
			},
			bluebind() {
				let {
					nodeId,
					nodeName,
					isp,
					task,
					area,
					natType,
					usbw,
					bwNum,
					dialType,
				} = this
				// if (!plan_task) return this.$fun.msg('请选择业务')
				if (!nodeId) return this.$fun.msg('请填写节点ID')
				if (!bwNum && this.showtype) return this.$fun.msg('请填写线路数')
				// if (!usbw) return this.$fun.msg('请填写上行宽带')
				if (!area) return this.$fun.msg('请选择省市')
				if (!isp) return this.$fun.msg('请选择运营商')
				if (!dialType && this.showtype) return this.$fun.msg('请选择拨号方式')
				if (!natType && this.showtype) return this.$fun.msg('请选择网络类型')
				this.$fun.ajax.post('bird/bind', {
					nodeId,
					nodeName,
					isp,
					task,
					area: area.ids,
					natType,
					usbw,
					bwNum,
					dialType,
				}).then(res => {
					if (res.code == 1) {
						this.$fun.msg(res.msg)
						this.$fun.jump('', 4, 1200)
					} else {
						this.$fun.msg(res.msg)
					}
				})
			},
			handleScanCode() {
				let _that = this
				//#ifdef H5
				this.$fun.msg('H5暂不支持扫码！')
				//#endif
				// #ifndef H5
				uni.scanCode({
					success: function(res) {
						_that.nodeId = res.result
					}
				});
				// #endif
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F1F3F6;
	}

	.toptext {
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		display: flex;
		justify-content: center;
		padding-top: 10rpx;
	}

	.binding {
		width: 690rpx;
		// height: 620rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 10rpx 0;
		margin: 30rpx auto 50rpx;

		.bindingitem {
			width: 690rpx;
			height: 100rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			display: flex;
			align-items: center;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			padding: 0 20rpx;

			.iclass {
				color: #CCCCCC;
			}

			image {
				width: 32rpx;
				height: 32rpx;
			}

			span {
				font-weight: 400;
				font-size: 28rpx;
				color: #FF3D5D;
			}

			.name {
				width: 140rpx;
			}

			input {}


		}

		.bindline {
			width: 650rpx;
			height: 1rpx;
			background: #CCCCCC;
			border-radius: 24rpx;
			margin: 0 auto;
		}
	}

	.bindbtn {
		width: 690rpx;
		height: 88rpx;
		background: #397BFF;
		border-radius: 44rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
	}
</style>